<template>
  <div class="about">
        <toptop />
    <div class="head">
      <div>
        <input type="text" v-model="text" placeholder="请输入你的心愿" @blur="bgc1"/>
      </div>
      <div class="head-qiu">
        <div v-for="(item, index) in list" :key="index" class="qiu" :style="{background:item.bgc}" @click="bgc1(item.bgc)"></div>
      </div>
      <div>
        <van-button disabled  v-show="!a1">再想想</van-button>
        <van-button type="primary" v-show="a1" @click="xy">许愿</van-button>
      </div>
      <div id="yr2">
        <div 
        v-drag
        v-for="(item,index) in this.$store.state.list1" :key="index" 
        :style="{background:item.color,left:item.left,top:item.top}" 
        
        class="yr"

        >{{item.text}}<button @click="xixi(index)">删除</button></div>
        
      </div>
    </div>
    <div class="a2">
        昵称:{{this.$store.state.list[0]}}
    </div>
  </div>
</template>
<script>
import toptop from "../components/toptop";

export default {
   components: {
    toptop,
  },
  data() {
    return {
      text:'',
      list: [
        { bgc: "red" },
        { bgc: "blue" },
        { bgc: "black" },
        { bgc: "pink" },
        { bgc: "yellow" }
      ],
      bgc:'',
      a1:false,
      list1:[],
      y1:''
    };
  },
  mounted() {
   console.log(this.$store.state.list1);

  },
  methods: {
    bgc1(i){
      this.bgc=i
    
      if(this.text!=''&&this.bgc!=''){
        this.a1=true
      }else{
        this.a1=false
      }
    },
    xixi(i){
     
        this.$store.commit('ON_change3',i)
    },
    xy(){
      this.a1=false
    console.log(this.list1);
      if(this.list1.lenght>=4){
        alert('最多提交五个')
        return 
        this.text=''
      this.bgc=''
      }else{
      this.list1.push({
        text:this.text,
        color:this.bgc,
        top:parseInt(Math.random()*(200-0+1)+1)+'px',
        left:parseInt(Math.random()*(200-0+1)+1)+'px'
      })
      this.text=''
      this.bgc=''
     
                 
                 
      this.$store.commit('ON_change2',this.list1)
    }
    },

        
  },
  directives: {
    drag: {
      inserted: (el) => {
        let touch, disX, disY;

        el.ontouchstart = (e) => {
          if (e.touches) {
            //有可能对象在e上也有可能对象在e.touches[0]上
            touch = e.touches[0];
          } else {
            touch = e;
          }

          disX = touch.clientX - el.offsetLeft; //鼠标位置X减去元素距离左边距离（鼠标到元素左边的距离）
          disY = touch.clientY - el.offsetTop; //鼠标位置Y减去距离顶部距离（鼠标到元素顶部的高度）
        };
        el.ontouchmove = (e) => {
          if (e.touches) {
            //有可能对象在e上也有可能对象在e.touches[0]上
            touch = e.touches[0];
          } else {
            touch = e;
          }
          //用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
          let left = touch.clientX - disX;
          let top = touch.clientY - disY;
   
          //移动当前元素
          el.style.left = left + "px";
          el.style.top = top + "px";
          e.preventDefault(); //阻止页面的滑动默认事件
console.log(e.target);
        };
      },
    },
  },
};
</script>
<style lang="scss">
  .head-qiu{
    width: 100vw;
    height: 20vh;
    display: inline-flex;
    justify-content: space-around;
    .qiu{
      margin-top: 5vh;
      width: 15vw;
      height: 15vw;
      border-radius: 50%;
    }
  }
  .yr{
  width: 20vw;
  height: 20vw;
  text-align: center;
  position: absolute;
  }
   #yr2{
     width:100vw;
  height: 60vh;
  position: relative;
  overflow: hidden;
  }
  .about{
    position: relative;
    .a2{
      position: absolute;
      top: 0;
      left: 0;
    }
  }
</style>
